<template>
    <!-- 活动详情 -->
    <div>
        <el-scrollbar height="calc(60vh)">
        <el-card style="max-width: 100%">
            <el-form
            :model="activityDetail" 
            label-width="auto"
            style="max-width: 600px"
            >
                <el-form-item label="ID" >
                    <el-input v-model="activityDetail.id" readonly/>
                </el-form-item>
                <el-form-item label="账号" >
                    <el-input v-model="activityDetail.ownerName" readonly/>
                </el-form-item>
                <el-form-item label="活动名" >
                    <el-input v-model="activityDetail.name" readonly/>
                </el-form-item>
                <el-form-item label="开始时间" >
                    <el-input v-model="activityDetail.startTime" readonly/>
                </el-form-item>
                <el-form-item label="结束时间" >
                    <el-input v-model="activityDetail.endTime" readonly/>
                </el-form-item>
                <el-form-item label="活动预算" >
                    <el-input v-model="activityDetail.cost" readonly></el-input>
                </el-form-item>
            
                <el-form-item label="创建时间" >
                    <el-input v-model="activityDetail.createTime" readonly/>
                </el-form-item>
            
                <el-form-item label="创建人" >
                    <el-input v-model="activityDetail.createByName" readonly/>
                </el-form-item>
                <el-form-item label="编辑时间" >
                    <el-input v-model="activityDetail.editTime" readonly/>
                </el-form-item>
                <el-form-item label="编辑人" >
                    <el-input v-model="activityDetail.editByName" readonly/>
                </el-form-item>
                <el-form-item label="活动描述" >
                    <el-input v-model="activityDetail.description" readonly type="textarea"/>
                </el-form-item>
                <el-form-item label="填写备注" >
                    <el-input v-model="activityRemark.noteContent"  type="textarea" :rows="6"/>
                </el-form-item>
            </el-form>
            <el-button type="primary" style="margin-left: 100px;" @click="addActivityRemark">提交</el-button>
            <el-button type="info" @click="router.go(-1)" plain>返回</el-button>
        </el-card>
    </el-scrollbar>
    </div>
    <!-- 备注列表 -->
    <div style="margin: 20px;">
        <el-table :data="remarkList" style="width: 100%">
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="createTime" label="备注时间" />
            <el-table-column prop="createByName" label="备注人" />
            <el-table-column prop="editTime" label="最后编辑时间" />
            <el-table-column prop="editByName" label="编辑人" />
            <el-table-column fixed="right" label="操作" >
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="remarkInfo(scope.row.id)">编辑</el-button>
                    <el-button link type="danger" size="small" @click=deleteRemark(scope.row.id)>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px;">
            <el-pagination 
                background 
                layout="prev, pager, next" 
                :total="page.total"
                :page-size="page.pageSize"
                @current-change="currentChange" 
            />
        </div>
    </div>
    <!-- dialog对话框 -->
    <el-dialog
        v-model="dialogVisible"
        title="备注内容"
        width="500"
    >
        <div>
            <el-form-item label="备注" >
                <el-input  v-model="remarkContent" type="textarea" :rows="6"/>
            </el-form-item>
        </div>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="updateRemark">
                提交
            </el-button>
        </div>
        </template>
  </el-dialog>
 </template>
<script lang="ts" setup name="ActivityDetail">
import { baseService } from '@/utils/httpReqest';
import { ElMessage , ElMessageBox} from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { ActivityRemark } from '@/hooks/activityRemark';
import router from '@/router';
import Activity from '@/hooks/activity';
let route = useRoute();
let activityDetail = reactive(new Activity());
let activityRemark = ref<ActivityRemark>(new ActivityRemark);
let remarkList = ref<ActivityRemark[]>([]);
let remarkContent = ref('');
let editRemarkId : any = undefined;
let page = reactive({
    pageSize: 2, //单页记录数
    total: 0,
    currentPage: 1,
})
let dialogVisible = ref(false);
let searchRemark = (number = 1) => {
    baseService.doGet(`/activityRemark/list`, {
        activityId: activityDetail.id,
        pageSize: page.pageSize,
        currentPage: page.currentPage
    }).then((res: any) => {
        console.log(res);
        if (res.code == 200) {
            remarkList.value = res.data.data
            page.currentPage = res.data.currentPage
            page.total = res.data.total
            console.log("@", remarkList.value);
        } else {
            ElMessage.error("获取备注信息出错")
        }
    })
}
onMounted(() => {
    baseService.doGet(`/activity/info/${route.params.id}`)
        .then((res: any) => {
            if (res.code == 200) {
                for (const key in activityDetail) {
                    activityDetail[key as keyof Activity] = res.data[key]
                }
                searchRemark(1);
            } else {
                ElMessage.error("该活动信息不存在")
            }
        })

})
let addActivityRemark = () => {
    activityRemark.value.activityId = activityDetail.id;
    baseService.doPost("activityRemark/add", activityRemark.value).then((res: any) => {
        if (res.code == 200) {
            ElMessage.success("添加备注成功")
            searchRemark(page.currentPage);
        } else {
            ElMessage.error("添加备注失败")
        }
    })
}
let currentChange = (number: number) => {
    page.currentPage = number;
    searchRemark(number)
}
let remarkInfo = (remarkId: number) => {
    dialogVisible.value = true;
    editRemarkId = remarkId;
    baseService.doGet("/activityRemark/info", { remarkId }).then((res:any) => {
        if (res.code == 200) {
            remarkContent.value = res.data.noteContent
        } else {
            ElMessage.error("添加备注失败")
        }
    })
}
let updateRemark = () => {
    dialogVisible.value = false;
    baseService.doPut("/activityRemark/update",{
        id:editRemarkId,
        noteContent:remarkContent.value
    }).then((res:any) => {
        if (res.code == 200) {
            ElMessage.success("更新成功")
            searchRemark(page.currentPage);
        } else {
            ElMessage.error("更新失败")
        }
    })
}   
let deleteRemark = (id:number) => {
    ElMessageBox.confirm(
    '确定要删除此消息吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        baseService.doDelete("/activityRemark/delete",{id}).then((res:any) => {
            if(res.code == 200){
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                searchRemark(page.currentPage);   
            }else{
                ElMessage({
                    type: 'info',
                    message: '删除失败',
                })
            }
        })
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>
<style scoped></style>